<template>
    <div>
        <div class="my_header">
            <div class="left">
                <van-icon name="wap-nav" size="22" />
        </div>
        <div class="content">
            <div :class="{active:currentTag === 1}" @click="handleClick(1)">我的</div>
            <div :class="{active:currentTag === 2}" @click="handleClick(2)">发现</div>
            <div :class="{active:currentTag === 3}" @click="handleClick(3)">云村</div>
            <div :class="{active:currentTag === 4}" @click="handleClick(4)">视频</div>
        </div>
        <div class="right">
            <van-icon name="search" size="22" />
        </div>
    </div>
</div>
</template>
<script setup>
import {ref} from 'vue'
import router from '@/router/index.js'

let currentTag = ref(2)
const handleClick = (tag)=>{
    console.log(tag);
    currentTag.value = tag;
    router.push(
     { 
        name:tag === 1 ? 'mine':tag === 2 ? 'discovery' :tag === 3 ? 'yuncun' : 'video'
     }
)
};

</script>
<style scoped>
.my_header{
    display: flex;
    justify-content: space-between;
}
.my_header .content {
    display: flex;
    width: 180px;
    justify-content: space-around;
}
</style>